<script setup lang="ts">
	const cardLoading = ref(false)
</script>

<template>
	<a-card :bordered="false" :loading="cardLoading">
		<h4>图文导航</h4>
		<a-divider />
		<a-row :gutter="[20, 24]">
			<a-col :span="3" v-for="item in 16" :key="item" class="cursor-pointer">
				<a-card :bordered="false" :loading="cardLoading">
					<div class="flex flex-col text-center">
						<a-image :width="50" src="https://aliyuncdn.antdv.com/logo.png" :preview="false" />
						<span>工作台</span>
					</div>
				</a-card>
			</a-col>
		</a-row>
	</a-card>
</template>

<style scoped lang="less">
	.box {
		box-shadow:
			0 1px 2px 0 rgba(0, 0, 0, 0.03),
			0 1px 6px -1px rgba(0, 0, 0, 0.02),
			0 2px 4px 0 rgba(0, 0, 0, 0.02);
	}

	:deep(.ant-divider-horizontal) {
		margin-top: 10px;
	}
</style>
